<!--
 * @Descripttion:
 * @version:
 * @Author: tanghao1
 * @Date: 2021-02-22 15:18:42
 * @LastEditors: tanghao1
 * @LastEditTime: 2021-03-18 09:47:29
-->
<template>
  <el-dialog
    ref="refDlg"
    :title="'属性'"
    :visible.sync="dialogShow"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :hide-func-bar="true"
    :before-close="clearForm"
    width="600px"
    @close="closeDialog"
  >
    <div>
      <div>
        <table-box
          ref="refTable"
          :table-config="tableConfig"
          table-height="200"
          :other-filters="otherFilters"
          :selected-arry.sync="multipleSelection"
          :off-set="-10"
          @data-change="dataChange"
          @selection-change="handleSelectionChange"
          @btnOperate="btnOperate"
        >
          <el-table-column slot="before" label="序号" type="selection" header-row-class-name="table-list-header" />
        </table-box>
        <span>已选择{{ selectData.length }}个属性</span>
        <!-- 列表 -->
        <el-table
          :data="selectData"
          style="width: 100%;margin-top: 10px;"
          :header-cell-style="{'text-align':'center'}"
          :cell-style="{'text-align':'center'}"
          row-key="id"
        >
          <el-table-column
            prop="attCode"
            label="属性编码"
            sortable
            width="150"
          />
          <el-table-column
            prop="attName"
            label="属性名称"
            sortable
            width="150"
          />
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="text" size="mini" @click="setTop(scope.row)">删除</el-button>
            </template>
          </el-table-column></el-table>
      </div>
      <div slot="footer">
        <el-button size="mini" @click="closeDialog">取消</el-button>
        <el-button size="mini" type="primary" @click="save">保存</el-button>
      </div>
    </div>
  </el-dialog>
</template>
<script>
import { getToken } from '@/utils/auth'
// import { confPriceFactor, factorTypeCodeReq } from '@/api/basdatApi' // 新增/编辑
// import { saveNav, editNav, getTreeAtlas, getPageAtlas, getPicAtlas } from '@/api/shopauxPlat/navConfig' // 新增编辑-保存
export default {
  name: 'DemoEditForm',
  props: {
    visible: {
      type: Boolean,
      default: false,
      required: true
    },
    otherFilter: {
      type: [String, Object],
      default: ''
    },
    detailData: {
      type: [String, Object],
      default: ''
    }
  },
  data() {
    return {
      picUrl: `${process.env.VUE_APP_BASE_API}/api/v1/file/upload`,
      headers: {
        'X-Token': this.$store.getters.token ? getToken() : '',
        'Authorization': this.$store.getters.token ? 'Bearer ' + getToken() : ''
      },
      submiting: false,
      picFile: [],
      gotoTreeList: [],
      otherFilters: [],
      selectData: [],
      props: { multiple: true },
      tableConfig: {
        interfacePath: `${process.env.VUE_APP_BASE_API}/api/v1/atlasAttribute/page`,
        pageSize: 20,
        // hideFuncBar: true,
        sort: '',
        order: 'desc',
        setting: [
          {
            prop: 'attCode',
            label: '属性编码',
            minWidth: 130
          },
          {
            prop: 'attName',
            label: '属性名称',
            minWidth: 130
          }]
      },
      defaultProps: {
        children: 'childList',
        label: 'categoryName'
      },
      imageUrl: '',
      gotoTypeList: [
        { dictId: '01',
          dictName: '商品中心类目',
          dictCode: 'GOODS_CENTER_CATEGORY'
        },
        { dictId: '02',
          dictName: '外部链接',
          dictCode: 'OUTSIDE_LINK'
        },
        { dictId: '03',
          dictName: '应用页面',
          dictCode: 'APPLY_PAGE'
        },
        { dictId: '04',
          dictName: '图册',
          dictCode: 'ATLAS'
        }], // 关联类型
      gotoValueList: [], // 应用页面
      gotoValuepicList: [], // 图册
      formData: {
        tabName: '',
        state: '1',
        gotoValue: ''
      },
      formRules: {
        tabName: [{
          required: true,
          message: '请输入导航名称',
          trigger: 'blur'
        }],
        state: [{
          required: true,
          message: '请选择是否显示',
          trigger: 'blur'
        }],
        gotoType: [{
          required: true,
          message: '请选择跳转关联',
          trigger: 'blur'
        }]
      }
    }
  },
  computed: {
    dialogShow: {
      get() {
        return this.visible
      },
      set(val) {
        this.$emit('update:visible', val)
      }
    }
  },
  watch: {
    'formData.gotoType': {
      handler(val, oldVal) {
      }
    }
  },
  created() {
    this.otherFilters = this.otherFilter
    const data = this.detailData
    if (data.state === 1) {
      data.state = '1'
    }
    if (data) {
      this.formData = Object.assign({}, data)
    }
  },
  mounted() {
    this.imageUrl = this.formData.picUrl
  },
  methods: {
    closeDialog() {
      this.dialogShow = false
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
      this.selectData = val
    },
    // 提交表单处理
    save() {
      const data = this.selectData
      this.$emit('getChildData', data)
      this.dialogShow = false
    }
  }
}
</script>
<style lang='scss' scoped>
.el-col el-col-11{margin-bottom: 20px;}
 .avatar-uploader .el-upload {
    border: 1px dashed #181717;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    border: 1px dashed #181717;
    border-radius: 6px;
    font-size: 28px;
    color: #8c939d;
    width: 120px;
    height: 120px;
    line-height: 120px;
    text-align: center;
  }
  .avatar {
    width: 120px;
    height: 120px;
    display: block;
  }
  .footer{
    margin: 10px;
  }
</style>
